<template>
    <!-- 自定义标题栏 -->
    <div class="title-bar-container">
        <ul class="title" :style="{ color: props.color }">
            <li>
                <MinusOutlined @click="minimize" />
            </li>
            <li>
                <BorderOutlined @click="toggleMaximize" />
            </li>
            <li>
                <CloseOutlined @click="close" />
            </li>
        </ul>
    </div>
</template>

<script setup>
import { MinusOutlined, BorderOutlined, CloseOutlined } from '@ant-design/icons-vue'

const props = defineProps({
    color: {
        type: String,
        default: '#212121'
    }
})

const minimize = () => {
    window.electron.windowControlInvoke('minimize')
}
const toggleMaximize = () => {
    window.electron.windowControlInvoke('maximize')
}
const close = () => {
    window.electron.windowControlInvoke('close')
}
</script>

<style lang="less" scoped>
.title-bar-container {
    width: auto;
    height: 55px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    position: fixed;
    right: 0; 
    z-index: 666;
}

.title {
    position: absolute;
    right: 15px;
    width: 100px;
    height: 30px;
    font-size: 14px;
    user-select: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    list-style: none;
}

li {
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
}

li:hover {
    background: #E1E1E1;
    cursor: pointer;
}

li:nth-child(3):hover {
    background: #FF4500;
    opacity: 1;
    border: none;
}
</style>